<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div>
          <div class="left" >
            <label class="el-form-item__label" style="width: 80px;">关键字</label>
             <el-input v-model="keyword" placeholder="根据编号搜索" style="width:350px" ></el-input>
        </div>
        <div class="right">
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        </div>

         <!-- 数据记录 -->
        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 表格 -->
       <el-table
    :data="tableData"
    style="width: 100%"
    >
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="260">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="150"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="questionIDs"
      label="题目编号"
      width="350">
      <template slot-scope="scope">
        <div v-for="(item,index) in scope.row.questionIDs" :key="index"  >
          <a href="#" style="color: rgb(0, 153, 255);"  @click="showDialog(item.id)">{{item.number}}</a>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间"
      width="230">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)"
      width="230">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)"
      width="180">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人"
      width="120">
    </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row)"></el-button>
      </template>
    </el-table-column>
       </el-table>
       <!-- 分页 -->
           <div class="paginationRight">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="  prev, pager, next,sizes, jumper"
              :total="total">
              </el-pagination>
           </div>
      <!-- 弹出框 -->
       <el-dialog :title="cTitle"
        :visible.sync="isShowDialog"
        v-if="isShowDialog"
        >
        <questions-preview @close="isShowDialog= false" :testList="testList" />
      </el-dialog>
      </el-card>
      <!--  -->
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      keyword: '', // 关键字
      total: 0, // 总页数
      tableData: [], // 返回的数据列表
      page: 1,
      pagesize: 20,
      questionType: [], // 枚举列表
      currentId: '', // 当前id
      cTitle: '题目预览',
      isShowDialog: false, // 是否显示弹框
      testList: {}// 题目列表
    }
  },
  computed: {
    cResultTip () {
      return `共 ${this.total} 条记录`
    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    // 清除列表
    reset () {
      this.keyword = ''
      this.getRandoms()
    },

    // 展示弹出层
    async showDialog (id) {
      // console.log(id)
      this.isShowDialog = true
      const res = await detail({ id })
      // console.log(res)
      // const obj= {...res.data.}
      this.testList = res.data
      // console.log(res.data)
    },

    // 删除
    async del (row) {
      const confirmRes = await this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmRes)
      if (confirmRes === 'cancel') return this.$message('删除组题取消成功')
      await removeRandoms({ id: row.id })
      // console.log(res)
      if (this.tableData.length === 1) {
        this.page--
      }
      if (this.page <= 0) {
        this.page = 1
      }
      this.$message.success('成功删除该组题')
      this.getRandoms()
      // console.log(res)
    },

    // 筛选
    async search () {
      this.getRandoms()
    },

    // 格式化数据
    formatter (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = questionType.find(item => {
        return (item.value).toString() === cellValue
      })
      return obj ? obj.label : '未知'
    },

    // 获取题组列表
    async getRandoms () {
      const obj = { keyword: this.keyword, page: this.page, pagesize: this.pagesize }
      const res = await randoms(obj)
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 更改每页显示的条数
    handleSizeChange (size) {
      this.pagesize = size
      this.getRandoms()
    },

    // 点击某一个页码
    handleCurrentChange (page) {
      this.page = page
      this.getRandoms()
    }
  }
}
</script>

<style scoped>
.el-card{
  height: 100%;
}
.left{
  float: left;
  width: 600px;
  height: 30px;
  margin-bottom: 20px;
  padding-left: 10px;
}

input.el-input__inner {

    margin-left: 10px;
}
 ::v-deep .el-input{
   width:350px;
   line-height: 30px;

 }
.right {
    float: right;
}
.el-alert{
 margin-bottom: 20px;
}

::v-deep [data-v-48a0d8d3] .el-input {
    width: 100px;
    line-height: 30px;
}
.paginationRight{
  margin: 20px 0;
  float: right;
}

</style>
